/**
 * Created by dio on 2017/3/18.
 */

import React from "react";
import {
    ActivityIndicator,
    Alert,
    InteractionManager,
    ScrollView,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from "react-native";
import ModuleCommonHeader from "../module/ModuleCommonHeader";
import chjStyle from "../../CustomStyle";
import CarsOfShop from "./CarsOfShop";
import Util from "../Util";

export default class Shoplist extends React.Component
{
    constructor(props){
        super(props);

        this.state = {
            isLoading:true,
            shopArray:[],
            filter:null
        };
    }

    componentDidMount()
    {
        InteractionManager.runAfterInteractions(
            ()=>{
                const params = {
                    type: 2,
                    userid: Util.getUser().id,
                };
                Util.postServer('user/carsourcelist', params, (result)=>this.onRequestListSuccess(result), (msg)=>this.onRequestListFailed(msg));
            }
        );
    }

    onRequestListSuccess(result){
        this.setState(
            {
                isLoading:false,
                shopArray:result.data.sourcelist.reverse()
            }
        );
    }

    onRequestListFailed(msg){
        Alert.alert(msg);
    }

    componentWillUnmount()
    {

    }

    render()
    {
        if (this.state.isLoading)
        {
            return (
                <View style={chjStyle.mainContainer}>
                    <ModuleCommonHeader title="商家大厅" leftText="返回" clickedLeft={()=>this.props.navigator.pop()}/>
                    <ActivityIndicator
                        animating={true}
                        style={{alignItems: 'center', justifyContent: 'center', height: chjStyle.height - chjStyle.headerHeight, top: chjStyle.headerHeight}}
                        size="large" />
                </View>
            );
        }
        return (
            <View style={chjStyle.mainContainer}>
                <ModuleCommonHeader title="商家大厅" leftText="返回" clickedLeft={()=>this.props.navigator.pop()}/>
                <ScrollView style={chjStyle.recordContainer}>
                    <View style={{left:chjStyle.getActualSizeInHorizontal(20), width:chjStyle.getActualSizeInHorizontal(710), height:chjStyle.getActualSizeInVertical(88), backgroundColor:'#eee',
                        borderRadius:chjStyle.getActualSizeInVertical(44), marginTop:chjStyle.getActualSizeInVertical(20),
                    }}>
                        <TextInput
                            placeholder='请输入要查询的商家名称或电话'
                            keyboardType='default'
                            onChangeText={(value)=>{this.setState({filter:value})}}
                            underlineColorAndroid={'#00000000'}
                            style={[chjStyle.baseText, {position:'absolute', textAlign:'center',textAlignVertical:'center', fontSize:chjStyle.getActualFontSize(28), color:'#303030', left: chjStyle.getActualSizeInHorizontal(44), right:chjStyle.getActualSizeInHorizontal(44), height:chjStyle.getActualSizeInVertical(88)}]}
                        />
                    </View>
                {
                    this.state.shopArray.map((item,i)=>this.renderShopCell(item, i))
                }
                </ScrollView>
            </View>
        );
    }

    renderShopCell(item, i)
    {
        if (!this.state.filter || item.source.indexOf(this.state.filter) != -1 || item.phone.indexOf(this.state.filter) != -1)
        return (<TouchableOpacity
            style={[chjStyle.textItem]}
            onPress={()=>{
                    this.props.navigator.push({
                        name:item.source,
                        component:CarsOfShop,
                        sid:item.sid,
                    });
                }
            }>
            <Text
                style={[chjStyle.baseText, {
                    position:'absolute',
                    color:'#999',
                    textAlign: 'left',
                    backgroundColor: 'rgba(0, 0, 0, 0)',
                    fontSize: chjStyle.getActualFontSize(20),
                    top: chjStyle.getActualSizeInVertical(52),
                    left: chjStyle.getActualSizeInHorizontal(40),
                    width: chjStyle.getActualSizeInHorizontal(375),
                }]}>No.{item.sid}</Text>
            <Text
                style={[chjStyle.baseText, {
                    position:'absolute',
                    color:'#303030',
                    textAlign: 'left',
                    backgroundColor: 'rgba(0, 0, 0, 0)',
                    fontSize: chjStyle.getActualFontSize(30),
                    top: chjStyle.getActualSizeInVertical(45),
                    left: chjStyle.getActualSizeInHorizontal(140),
                    width: chjStyle.getActualSizeInHorizontal(375),
                }]}>{item.source}</Text>
            <Text
                style={[chjStyle.baseText, {
                    position:'absolute',
                    color:this.state.highlight?'#f00':'#303030',
                    textAlign: 'right',
                    backgroundColor: 'rgba(0, 0, 0, 0)',
                    fontSize: chjStyle.getActualFontSize(30),
                    top: chjStyle.getActualSizeInVertical(45),
                    right: chjStyle.getActualSizeInHorizontal(30),
                    width: chjStyle.getActualSizeInHorizontal(375),
                }]}>{item.phone}</Text>
        </TouchableOpacity>);
    }
}
